import { h } from 'vue';
import { NAvatar, NSwitch } from 'naive-ui';

export const columns = [
  {
    title: 'id',
    key: 'id',
    width: 60,
  },
  {
    title: '标题',
    key: 'title',
    width: 200,
  },
  {
    title: '预览',
    key: 'preview',
    width: 100,
    render(row) {
      return h(NAvatar, {
        size: 48,
        src: row.preview,
      });
    },
  },
  {
    title: '标签',
    key: 'tags',
    width: 150,
  },
  {
    title: '用户名',
    key: 'username',
    width: 100,
  },
  {
    title: '分类名',
    key: 'categoryName',
    width: 100,
  },
  {
    title: '状态',
    key: 'state',
    width: 60,
    render(row) {
      if (row.state == '1') {
        row.state = true;
        return h(NSwitch, {
          round: true,
          value: row.state,
          onUpdateValue: () => handleChangeState(row),
        });
      } else {
        row.state = false;
        return h(NSwitch, {
          round: true,
          value: row.state,
          onUpdateValue: () => handleChangeState(row),
        });
      }
    },
  },
  {
    title: '详情',
    key: 'details',
    width: 150,
  },

  {
    title: '点赞数',
    key: 'likes',
    width: 100,
    sorter: (row1, row2) => row1.likes - row2.likes,
  },
  {
    title: '浏览量',
    key: 'views',
    width: 100,
  },
  {
    title: '收藏数',
    key: 'collections',
    width: 100,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 160,
  },
  {
    title: '修改时间',
    key: 'updateTime',
    width: 160,
  },
];

function handleChangeState(row) {
  row.state = !row.state;
}
